<!DOCTYPE html>
<!-- saved from url=(0198)http://xcdn.php.cn/js/jQuery/jQuery%E6%89%8B%E6%9C%BA%E7%AB%AF%E4%BB%BF%E6%8E%A2%E6%8E%A2APP%E5%88%87%E6%8D%A2%E7%89%B9%E6%95%88/index.html?sign=32571b9536d8298bf04852d023d0a2ee&timestamp=1574754103 -->
<html lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>jQuery手机端仿探探APP切换特效 </title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/aui.css" />
		<link rel="stylesheet" href="css/style.css" />
		<style>
			#board {
				width: 100%;
				height: 100vh;
				position: relative;
				overflow: hidden;
				background: url(images/tap_page.png) no-repeat center;
				background-size: 100%;
			}
			
			.card {
				width: 77%;
    			height: 16rem;
				position: absolute;
				top: 35%;
				left: 50%;
				border-radius: 1%;
				box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
				background: white;
				transform: translateX(-50%) translateY(-50%) scale(0.95);
			}
			.card p.check_detail{
				right: .75rem;
				bottom: .5rem;
				color: #00bcd4;
				font-weight: bold;
				font-size: .75rem;
			}
			.card p.check_detail a{
				color: #00bcd4;
			}
			.aui-text-super{
				color: #00bcd4;
			}
			.aui-margin-t-20{
				margin-top: 1rem;
			}
			.aui-text-bottom{
				width: 50%;
				left: 25%;
			}
			.aui-text-bottom > div{
			    justify-content: space-between;
			    align-items: center;
			}
		</style>

	</head>

	<body>
		<header class="aui-background-transparent aui-bar aui-bar-nav aui-bar-nav-search aui-text-default">
		    <a class="aui-pull-left aui-btn" href="JavaScript:history.go(-1)">
		        <span class="aui-iconfont aui-icon-left"></span>
		    </a>
		    
		</header>

		<div id="board" class="aui-text-center">
			<div class="aui-position-fixed  aui-text-center aui-text-bottom" style="bottom: 3rem;">
				<div class="aui-display-flex">
					<div>
						<p><i class="aui-iconfont aui-icon-share"></i></p>
						分享
					</div>
					<div>
						<p><i class="aui-iconfont aui-icon-like"></i></p>
						收藏
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/hammer.min.js"></script>
		<script>
			/* LikeCarousel (c) 2019 Simone P.M. github.com/simonepm - Licensed MIT */

			class Carousel {

				constructor(element) {

					this.board = element

					// add first two cards programmatically
					this.push()
					this.push()

					// handle gestures
					this.handle()

				}

				handle() {

					// list all cards
					this.cards = this.board.querySelectorAll('.card')

					// get top card
					this.topCard = this.cards[this.cards.length - 1]

					// get next card
					this.nextCard = this.cards[this.cards.length - 2]

					// if at least one card is present
					if(this.cards.length > 0) {

						// set default top card position and scale
						this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(1)'

						// destroy previous Hammer instance, if present
						if(this.hammer) this.hammer.destroy()

						// listen for tap and pan gestures on top card
						this.hammer = new Hammer(this.topCard)
						this.hammer.add(new Hammer.Tap())
						this.hammer.add(new Hammer.Pan({
							position: Hammer.position_ALL,
							threshold: 0
						}))

						// pass events data to custom callbacks
						this.hammer.on('tap', (e) => {
							this.onTap(e)
						})
						this.hammer.on('pan', (e) => {
							this.onPan(e)
						})

					}

				}

				onTap(e) {

					// get finger position on top card
					let propX = (e.center.x - e.target.getBoundingClientRect().left) / e.target.clientWidth

					// get degree of Y rotation (+/-15 degrees)
					let rotateY = 15 * (propX < 0.05 ? -1 : 1)

					// change the transition property
					this.topCard.style.transition = 'transform 100ms ease-out'

					// rotate
					this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(' + rotateY + 'deg) scale(1)'

					// wait transition end
					setTimeout(() => {
						// reset transform properties
						this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(1)'
					}, 100)

				}

				onPan(e) {

					if(!this.isPanning) {

						this.isPanning = true

						// remove transition properties
						this.topCard.style.transition = null
						if(this.nextCard) this.nextCard.style.transition = null

						// get top card coordinates in pixels
						let style = window.getComputedStyle(this.topCard)
						let mx = style.transform.match(/^matrix\((.+)\)$/)
						this.startPosX = mx ? parseFloat(mx[1].split(', ')[4]) : 0
						this.startPosY = mx ? parseFloat(mx[1].split(', ')[5]) : 0

						// get top card bounds
						let bounds = this.topCard.getBoundingClientRect()

						// get finger position on top card, top (1) or bottom (-1)
						this.isDraggingFrom = (e.center.y - bounds.top) > this.topCard.clientHeight / 2 ? -1 : 1

					}

					// calculate new coordinates
					let posX = e.deltaX + this.startPosX
					let posY = e.deltaY + this.startPosY

					// get ratio between swiped pixels and the axes
					let propX = e.deltaX / this.board.clientWidth
					let propY = e.deltaY / this.board.clientHeight

					// get swipe direction, left (-1) or right (1)
					let dirX = e.deltaX < 0 ? -1 : 1

					// calculate rotation, between 0 and +/- 45 deg
					let deg = this.isDraggingFrom * dirX * Math.abs(propX) * 45

					// calculate scale ratio, between 95 and 100 %
					let scale = (95 + (5 * Math.abs(propX))) / 100

					// move top card
					this.topCard.style.transform = 'translateX(' + posX + 'px) translateY(' + posY + 'px) rotate(' + deg + 'deg) rotateY(0deg) scale(1)'

					// scale next card
					if(this.nextCard) this.nextCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(' + scale + ')'

					if(e.isFinal) {

						this.isPanning = false

						let successful = false

						// set back transition properties
						this.topCard.style.transition = 'transform 200ms ease-out'
						if(this.nextCard) this.nextCard.style.transition = 'transform 100ms linear'

						// check threshold
						if(propX > 0.25 && e.direction == Hammer.DIRECTION_RIGHT) {

							successful = true
								// get right border position
							posX = this.board.clientWidth

						} else if(propX < -0.25 && e.direction == Hammer.DIRECTION_LEFT) {

							successful = true
								// get left border position
							posX = -(this.board.clientWidth + this.topCard.clientWidth)

						} else if(propY < -0.25 && e.direction == Hammer.DIRECTION_UP) {

							successful = true
								// get top border position
							posY = -(this.board.clientHeight + this.topCard.clientHeight)

						}

						if(successful) {

							// throw card in the chosen direction
							this.topCard.style.transform = 'translateX(' + posX + 'px) translateY(' + posY + 'px) rotate(' + deg + 'deg)'

							// wait transition end
							setTimeout(() => {
								// remove swiped card
								this.board.removeChild(this.topCard)
									// add new card
								this.push()
									// handle gestures on new top card
								this.handle()
							}, 200)

						} else {

							// reset cards position
							this.topCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(1)'
							if(this.nextCard) this.nextCard.style.transform = 'translateX(-50%) translateY(-50%) rotate(0deg) rotateY(0deg) scale(0.95)'

						}

					}

				}

				push() {

					let card = document.createElement('div')

					card.classList.add('card')
						//(parseInt(3*Math.random())+1)为随机1-3随机数，需要几的随机数改前面的数字3即可，这里images文件夹图片就放了三张，可以多放几张，这样重复率会降低
						//			card.style.backgroundImage = "url('images/"+(parseInt(6*Math.random())+1)+".jpg"
					var html = '<div>\n'+
						'<p class="aui-text-super aui-font-size-16 aui-margin-t-20">修养</p>\n'+
						'<p class="aui-font-size-12 aui-text-gray aui-margin-t-10">#名言#</p>\n'+
						'<div class="aui-font-size-14 aui-text-three aui-margin-t-20">\n'+
							'知识就是力量。培根'+
						'</div>\n'+
						'<p class="aui-position-absolute check_detail"><a class="aui-pull-right " href="">查看详解</a></p>'
						'</div>'
					$(html).appendTo($('.card'))
					if(this.board.firstChild) {
						this.board.insertBefore(card, this.board.firstChild)
					} else {
						this.board.append(card)
					}

				}

			}

			let board = document.querySelector('#board')

			let carousel = new Carousel(board)
		</script>
	</body>

</html>